@extends('web.layout.index')
@section('content')
    <style>
        .article-item {
            display: flex;
            line-height: 40px;
            height: 40px;
            align-items: center;
            border-top: 1px yellow dotted;
            border-left: 1px yellow dotted;
            border-right: 1px yellow dotted;
            padding: 5px;
            font-size: 16px;
        }
        .article-item:hover {
            background-color: white;
        }
        .article-item:last-of-type {
            border-bottom: 1px yellow dotted;
        }
        .title {
            width: 200px;
        }
        .category {
            width: 100px;
        }
        .updated_at {
            width: 200px;
        }
        .title a {
            cursor: pointer;
        }
    </style>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="{{ (!isset($category_id) || (isset($category_id) && empty($category_id))) ? 'layui-this' : '' }}"><a href="/web/article">全部</a></li>
            @foreach($categories as $category)
                <li class="{{ isset($category_id) && $category_id == $category->id ? 'layui-this' : '' }}"><a href="/web/article?category_id={{ $category->id }}">{{ $category->title }}</a></li>
            @endforeach
        </ul>
        <div class="layui-tab-content">
            @foreach($articles as $article)
                <div class="article-item">
                    <div class="title">
                        <a href="/web/article/{{ $article->id }}">{{ $article->title }}</a>
                    </div>
                    <div class="category">
                        {{ $article->category->title ?? '-' }}
                    </div>
                    <div class="updated_at">
                        {{ $article->updated_at }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
